<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center justify-between">
      <div>
        <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
      </div>

      <div class="flex items-center justify-between">
        <span class="mr-4 block">礼物名称：</span>
        <el-input v-model="listQuery.search" class="mr-4 input" placeholder="请输入礼物名称"></el-input>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </div>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="序号" prop="id"/>
      <el-table-column label="礼物ID" prop="gift_id"/>
      <el-table-column label="礼物名称" prop="gift.name"/>
      <el-table-column label="礼物价格" prop="gift.price"/>
      <el-table-column label="礼物图片" prop="sex">
        <template slot-scope="scoped">
          <el-image :lazy="true" :src="scoped.row.gift.picture" class="imageStyle" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="合成列表排序" prop="sort"/>
      <el-table-column label="合成数量" prop="total"/>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="initData"
    />

    <!-- 添加 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible="addDialog"
      destroy-on-close
      lock-scroll
      title="添加礼物"
      width="30%"
      @close="closeAddDialog"
    >
      <div class="flex items-center">
        <p class="mr-4 w-20"><span style="color: red;">*</span>礼物ID:</p>
        <el-input v-model="user_code" placeholder="请输入礼物ID"/>
      </div>

      <section slot="footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="handleChecked()">确定</el-button>
      </section>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible="addDialog2"
      destroy-on-close
      lock-scroll
      title="添加礼物"
      width="30%"
      @close="closeAddDialog2"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        <el-form-item label="礼物ID">
          <el-input v-model="form.gift_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="礼物名称">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="礼物单价">
          <el-input v-model="form.price" disabled>
            <template slot="append">M豆</template>
          </el-input>
        </el-form-item>
        <el-form-item label="合成排序" prop="sort">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>

      <section slot="footer">
        <el-button @click="addDialog2 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit(row)">确定</el-button>
      </section>
    </el-dialog>

  </el-card>
</template>

<script>
import { giftList, magicAdd, magicDel, magicListData } from '@/api/magicCircle'

export default {
  data() {
    return {
      selectData: '',
      options: [
        {
          id: 1,
          value: 1,
          label: '全部'
        }
      ],
      tableList: [],
      user_code: '',
      nickname: '',
      dateList: undefined,
      listQuery: {
        user_code: '',
        nickname: '',
        page: 1,
        perPage: 10
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 0,
      /* 弹出框开关 */
      addDialog: false,
      addDialog2: false,

      rejectLoading: false,
      passLoading: false,
      id: '',
      // 拒绝原因
      reject_reason: '',
      form: {
        price: undefined,
        id: undefined,
        name: undefined,
        sort: undefined

      },
      rules: {
        sort: [{ required: true, message: '请输入合成排序', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleAdd() {
      this.addDialog = true
    },
    handleSearch() {
      this.listQuery.page = 1
      this.initData()
    },
    handleReset() {
      this.listQuery = {
        user_code: '',
        nickname: '',
        page: 1,
        perPage: 10
      }
      this.initData()
    },
    async initData() {
      try {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        const { data } = await magicListData(this.listQuery)
        this.listQuery.page = data.meta.page
        this.total = data.meta.total
        this.tableList = data.list
      } catch (e) {
        console.error(e)
      }
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除合成礼物, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const { code, data } = await magicDel({
          id: row.id
        })
        if (code === 200) {

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    async handleChecked() {
      if (!this.user_code.trim()) {
        return void this.$message.warning('请填写用户编号！')
      }
      let data = {
        id: this.user_code,
        page: 1
      }
      giftList(data).then(res => {
        if (res.data) {
          this.addDialog = false
          this.addDialog2 = true
          this.form.gift_id = res.data.data[0].id
          this.form.name = res.data.data[0].name
          this.form.price = res.data.data[0].price
        }
      }).finally(() => this.rejectLoading = false)
    },
    onSubmit() {
      magicAdd(this.form).then(res => {
        if (res.code === 200) {
          this.initData()
          this.addDialog2 = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    },
    closeAddDialog() {
      this.user_code = undefined
    },
    closeAddDialog2() {
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate() // 清除整个表单的校验
        this.$refs['form'].resetFields() // 清除整个表单的校验
      }
      this.form = {
        price: undefined,
        id: undefined,
        name: undefined,
        sort: undefined
      }
    }
  }
}
</script>

<style scoped>
.imageStyle {
  width: 150px;
}

.input {
  width: 200px;
}
</style>
